<!-- 数据可视化中心-数据准备-数据源基本信息管理 -->
<template>
  <el-container class="custom__container">
    <el-main class="custom__main">
      <hsa-adaptive-container>
        <!-- 查询 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="查询条件">
              <el-form label-width="100">
                <hsa-row :gutter="20">
                  <hsa-col :span="8">
                    <el-form-item label="接口名称">
                      <el-input v-model="searchFormData.interfaceName"/>
                    </el-form-item>
                  </hsa-col>
                  <hsa-col :span="8">
                    <el-form-item label="创建时间">
                      <el-date-picker
                        v-model="searchFormData.createTime"
                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                      />
                    </el-form-item>
                  </hsa-col>
                  <template #footbar>
                    <el-button type="default">取消</el-button>
                    <el-button type="primary">查询</el-button>
                  </template>
                </hsa-row>
              </el-form>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>

        <!-- 数据源管理 -->
        <hsa-adaptive-pane>
          <hsa-title-pane fill>
            <hsa-title-pane-item title="接口鉴权列表" fill>
              <hsa-table v-bind="tableOption"></hsa-table>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
      </hsa-adaptive-container>
      <authentication-analysis-popup ref="analysisPopupRef" />
      <log-recording ref="logRecordingPopupRef"></log-recording>
      <service-popup ref="servicePopupRef"></service-popup>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import authenticationAnalysisPopup from "./popup/authentication-analysis.vue";
import logRecording from "./popup/log-recording.vue";
import servicePopup from "./popup/service-popup.vue";
import apiAxios from "@/api/DataConstruction/DataService";
import { useRoute, useRouter } from 'vue-router'
const router = useRouter();
console.log(apiAxios,"apiAxios")
// 类型
import type { HsaTableColumn } from "hsa-ui";
interface Tree {
  label: string;
  children?: Tree[];
}

const searchFormData = ref({
  interfaceName:"",
  createTime:""
})
const analysisPopupRef = ref(null);
/**
 * 鉴权分析
 * @param row 表格行数据
 */
const authenticationAnalysis = (row: any) => {
  analysisPopupRef.value.open();
};

const servicePopupRef = ref(null);
/**
 *服务
 * @param row 表格行数据
 */
const queryService = (row: any) => {
  servicePopupRef.value.open();
};
const logRecordingPopupRef = ref(null);
const logRecordingDialog=(row:any)=>{
  logRecordingPopupRef.value.open();
}
/**
 * 权限控制
 * @param row 表格行数据
 */
const accessControl = (row: any) => {
  console.log("accessControl")
  router.push("/data-construction/access-control")
};
// 表格配置
const tableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    {
      date: "2016-05-02",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      state: "驱动类型",
      city: "192.168.168.222",
      zip: "端口",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "65535",
    },
  ]),
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "数据源名称", width: 220, prop: "date" },
    { align: "center", label: "数据源说明", minWidth: 200, prop: "name" },
    { align: "center", label: "驱动类型", width: 150, prop: "state" },
    { align: "center", label: "数据源IP", width: 160, prop: "city" },
    { align: "center", label: "端口", width: 100, prop: "zip" },
    {
      align: "center",
      label: "操作",
      width: 220,
      fixed: "right",
      type: "button",
      buttonGroup: [
        {
          type: "primary",
          label: "鉴权分析",
          click: (row) => {
            authenticationAnalysis(row);
          },
        },
        {
          type: "primary",
          label: "权限控制",
          click: (row) => {
            accessControl(row);
          },
        },
        {
          type: "primary",
          label: "服务",
          click: (row) => {
            queryService(row);
          },
        },
        {
          type: "primary",
          label: "日志",
          click:(row)=>{
            logRecordingDialog(row)
          }
        },
      ],
    },
  ]),
});

</script>

<style lang="scss" scoped>
// 容器
.custom__container {
  height: 100%;
  width: 100%;
  position: relative;
}

// 主要内容
.custom__main {
  padding: 0;
  padding-left: 10px;
}
</style>
